import {useDidShow} from '@tarojs/taro';
import {connect} from 'react-redux';
import {getGlobalData, Request} from '../../util';
import {Image} from '@tarojs/components';
import NavBar from '../../component/navbar/index';
import Taro from '@tarojs/taro';
import { useEffect, useState } from 'react';
import Styles from './index.module.less';
import Rarrow from '../../images/center/rarrow.png';
import Gift from '../../images/center/gift.png';
import Profile from '../../images/center/profile.png';
import Book from '../../images/center/book.png';
import Feedback from '../../images/center/feedback.png';
import { Style } from '@tarojs/runtime';


function index(props){

    const openid = Taro.getStorageSync('openid');
    const domain = getGlobalData("domain");
    const genderRange = ['秘密','男','女'];
    const [avatarUrl, setAvatarUrl] = useState("");

    const [trueName, setTrueName] = useState("");

    const [gender, setGender] = useState();

    /**
     * 跳转的页面
     * @param {*} page 跳转的页面地址
     */
    const navToPage = ((page)=>{
        Taro.navigateTo({
            url: page
        })
    })

    useEffect(()=>{

    },[])

    useDidShow(()=>{
        props.sendTabBarID();
        //判断是否授权微信头像和昵称
        Request(domain+"/client/user/userInfo",{openid:openid}).then((res)=>{
            const {gender,avatarUrl,true_name} = res.data.data;
            let genderID = gender ==  null ? 0 : gender;
            setGender(genderRange[genderID]);
            setAvatarUrl(avatarUrl == null ? "http://cdn.henrywong01.top/center/default.jpeg": avatarUrl);
            setTrueName(true_name == null ? "客官怎么称呼呀！": true_name)
        })
    })
    
    const handleMore = () => {
        Taro.navigateTo({
            url:"/pages/profile/index"
        })
    }


    return (
        <view>
            <NavBar title="个人中心"/>
            <view class={Styles.profile}>
                    <Image class={Styles.avatar} src={avatarUrl}/>
                    <view class={Styles.nickname}>{trueName}</view>
                    <text class={Styles.gender}>性别：{gender} </text>
                    <view class={Styles.more} onClick={handleMore}><Image src="http://cdn.henrywong01.top/center/more.png" class={Styles.img}/></view>
            </view>

            <view class={Styles.menu}>
                <view class={Styles.item} onClick = {()=>{
                        navToPage("/pages/gift/index")
                    }}>
                        <Image src = {Gift} class={Styles.icon}/>
                        <view class={Styles.txt}>换领登记</view>
                        <Image src = {Rarrow} class={Styles.rarrow}/>
                </view>

                <view class={Styles.item} onClick = {()=>{
                        navToPage("/pages/profile/index")
                    }}>
                        <Image src = {Profile} class={Styles.icon}/>
                        <view class={Styles.txt}>我的资料</view>
                        <Image src = {Rarrow} class={Styles.rarrow}/>
                </view>

                <view class={Styles.item} onClick = {()=>{
                        navToPage("/pages/confirm/index")
                    }}>
                        <Image src = {Book} class={Styles.icon}/>
                        <view class={Styles.txt}>已预约疗程</view>
                        <Image src = {Rarrow} class={Styles.rarrow}/>
                </view>
                <view class={Styles.item} onClick = {()=>{
                        navToPage("/pages/feedback/index")
                    }}>
                        <Image src = {Feedback} class={Styles.icon}/>
                        <view class={Styles.txt}>意见反馈</view>
                        <Image src = {Rarrow} class={Styles.rarrow}/>
                </view>
            </view>

            <view class={Styles.powered}>Powered by Henry, and technical file as follow: https://www.henrywong01.top</view>
            
        </view>
    )
}

const mapDispatchToProps = (dispatch) => {
    return {
        sendTabBarID:()=>{
            dispatch({
                type:"CENTER"
            })
        }
    }
}

export default connect(null, mapDispatchToProps)(index);